<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="用户/微信昵称">
              <a-input placeholder="请输入" v-model="queryParam.wechatName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="用户手机">
              <a-input placeholder="请输入" v-model="queryParam.phone"></a-input>
            </a-form-item>
          </a-col>

          <a-col :sm="24" :md="12" :xl="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域 -->
    <a-table
      ref="table"
      bordered
      size="middle"
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :scroll="{ x: 1200 }"
      @change="handleTableChange"
    >
      <template slot="avatarslot" slot-scope="text, record, index">
        <div class="anty-img-wrap">
          <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user" />
        </div>
      </template>
      <span slot="action" slot-scope="text, record">
        <a-button type="primary" class="ml5 mr5" size="small" @click="deleteBlack(record.id)">恢复</a-button>
      </span>
    </a-table>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getFileAccessHttpUrl } from '@/api/manage'
import { deleteAction } from '@/api/manage'
import Api from '@/api/ServiceManage/BlackList'
import BlackApi from '@/api/ServiceManage/BlackList'

export default {
  name: 'BlackList',
  mixins: [JeecgListMixin],
  data() {
    return {
      url: {
        list: Api.list
      },
      columns: []
    }
  },
  created() {
    this.columns = [
      {
        title: '用户/微信昵称',
        dataIndex: 'wechatName',
        align: 'center',
        width: 150
      },
      {
        title: '用户头像',
        dataIndex: 'avatar',
        align: 'center',
        scopedSlots: { customRender: 'avatarslot' }
      },
      {
        title: '拉黑原因',
        align: 'center',
        dataIndex: 'blackReason'
      },
      {
        title: '操作',
        dataIndex: 'action',
        align: 'center',
        scopedSlots: { customRender: 'action' }
      }
    ]
  },
  methods: {
    getAvatarView: function(avatar) {
      return getFileAccessHttpUrl(avatar)
    },

    // 加入黑名单
    deleteBlack(id) {
      deleteAction(BlackApi.delete, { id }).then(res => {
        this.$message.success(res.message)
        this.loadData()
      })
    }
  }
}
</script>

<style scoped></style>

